<template>
  <view>
    <!-- 这是一个没有输入功能的假输入框，点击后直接跳转到单独的搜索页面-->
    <view class="my-search-container" @click="goToSearchPage">
      <!-- 这是一个没有输入功能的假输入框，点击后直接跳转到单独的搜索页面-->
      <view class="my-search-box">
        <uni-icons
          style="margin-left: 20rpx"
          color="#999"
          type="search"
          size="13"
        ></uni-icons>
        <text class="placeholder">搜索</text>
      </view>
    </view>
    <!-- 轮播图区域 -->
    <swiper
      class="top-swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :circular="true"
      indicator-color="#79b0ae"
    >
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <navigator
          class="swiper-content"
          :url="`/pages_sub1/product-detail/product-detail?goodsId=${item.link.param.query.goodsId}`"
        >
          <image :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 通告栏 -->
    <uni-notice-bar
      background-color="#525252"
      color="#fff"
      show-icon
      scrollable
      single
      text="智慧商城2.0全新上线，更多新品等你来选~"
    />
    <!-- 导航组 -->
    <uni-grid :column="5" :showBorder="false">
      <uni-grid-item
        v-for="(item, index) in navList"
        :index="index"
        :key="index"
      >
        <view class="nav-list" @click="goCategory(item.link)">
          <image :src="item.imgUrl" class="nav-img"></image>
          <text class="nav-text">{{ item.text }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
    <!-- 图片 -->
    <image
    @click="goCategory(item.link)"
      class="notice"
      v-for="item in imageList"
      :key="item.imgName"
      :src="item.imgUrl"
    ></image>
    <!-- 猜你喜欢 -->
    <rich-text :nodes="nodesText"></rich-text>
    <!-- 商品列表组件 -->
    <MyGoods :goodsList="goodsList"></MyGoods>
  </view>
</template>

<script>
import MyGoods from '@/components/goods.vue'
export default {
  components: {
    MyGoods
  },
  data() {
    return {
      swiperList: [], //轮播图列表
      navList: [], //导航组列表
      imageList: [], //推荐的图片
      nodesText: '',
      goodsList: [] //商品组
    }
  },
  created() {
    this.getSwiperList()
  },
  methods: {
    //获取首页数据
    async getSwiperList() {
      const res = await this.$http.get('/page/detail')
      // console.log(res.data.pageData.items[1].data)
      //   console.log(res.data.pageData.items)
      if (res.status !== 200) return this.$msg()
      // 获取轮播图列表
      this.swiperList = res.data.pageData.items[1].data
      // 获取导航组列表
      this.navList = res.data.pageData.items[3].data
      //推荐的图片
      this.imageList = res.data.pageData.items[4].data
      //猜你喜欢
      this.nodesText = res.data.pageData.items[5].params.content
      this.goodsList = res.data.pageData.items[6].data
    },
    // 跳转搜索页
    goToSearchPage() {
      // console.log('去搜索页')
      uni.navigateTo({
        url: '/pages_sub1/search/search'
      })
    },
    // 去分类页
    goCategory(link){
        if(link) {
            uni.switchTab({
                url:'/pages/category/category'
            })
        }
    }
  }
}
</script>

<style lang="scss">
.top-swiper {
  height: 330rpx;

  .swiper-content,
  image {
    width: 100%;
    height: 100%;
  }
}
.nav-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .nav-img {
    width: 88rpx;
    height: 88rpx;
    margin-bottom: 8rpx;
  }
  .nav-text {
    font-size: 26rpx;
  }
}
.notice {
  width: 100%;
  height: 236rpx;
}
.my-search-container {
  background-color: #f1f1f2;
  height: 100rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 60rpx;
  width: 710rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  //   justify-content: center;

  .placeholder {
    font-size: 26rpx;
    margin-left: 10rpx;
    color: #999;
  }
}
</style>
